<template>
  <div ref="chart" :class="className" :style="{ width: width, height: height }" />
</template>

<script setup>
import { nextTick, ref, watch, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
  className: {
    type: String,
    default: 'chart'
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '100%'
  },
  showZoom: {
    type: Boolean,
    default: false
  },
  chartData: {
    type: Object,
    default: () => {}
  }
})

const chart = ref(null);

watch(
  props.chartData,
  (val) => {
    nextTick(() => {
      initChart();
    })
  },
  {deep: true, immediate: true}
)

onBeforeUnmount(() => {
  if(!chart.value) {
    return
  }
  chart.value.dispose();
  chart.value = null;
})

const initChart = () => {
  let { datas, dataX  } = props.chartData;
  let showZoom = props.showZoom;
  let chartDom = echarts.init(chart.value,)
  chartDom.clear() 
  chartDom.setOption({
    tooltip: {
      show: true,
      trigger: 'axis',
    },
    legend: {
      show: true,
      itemGap: 20,
      x: 'center',
      bottom: '1px',
      textStyle: {
        fontSize: 14,
        color: '#fff',
        fontFamily: 'HONORSans'
      }
    },
    dataZoom: showZoom ? [{
      show: showZoom,
      xAxisIndex: [0],
      height: 10,
      bottom: 20,
      start: 0,
      end: 100
    }, {
      type: "inside",
      show: showZoom,
      height: 15,
      start: 0,
      end: 100
    }] : [],
    grid: {
      left: '20px',
      right: '20px',
      bottom: '50px',
      top: '45px',
      containLabel: true
    },
    xAxis: [{
      type: 'category',
      boundaryGap: true,
      axisLine: {
        lineStyle: {
          width: 1,
          type: 'solid',
          color: 'rgba(255, 255, 255, .2)'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: true,
        margin: 10,
        textStyle: {
          fontSize: 11,
          color: '#fff',
          fontFamily: 'HONORSans'
        }
      },
      data: dataX
    }],
    yAxis: [{
      type: 'value',
      name: '单位：亿元',
      nameLocation: "end",
      nameTextStyle: {
        color: '#fff',
        fontSize: 12,
        fontFamily: 'HONORSans',
        padding: [0, 30, 0, 0]
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#57617B'
        }
      },
      axisLabel: {
        show: true,
        margin: 10,
        textStyle: {
          fontSize: 12,
          color: 'rgba(255, 255, 255, .7)'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255, 255, 255, .2)'
        }
      }
    },{
      type: 'value',
      name: '单位：%',
      nameLocation: "end",
      nameTextStyle: {
        color: '#fff',
        fontSize: 12,
        fontFamily: 'HONORSans',
        // padding: [0, 30, 0, 0]
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: true,
        margin: 10,
        textStyle: {
          fontSize: 12,
          color: 'rgba(255, 255, 255, .7)'
        },
        // formatter: '{value:.2f} %'
        // formatter: function (value, index) {
        //   return value.toFixed(2)+'%'
        // }

      },
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255, 255, 255, .2)'
        }
      }
    }],
    series: [
      {
        name: '存款余额',
        type: 'bar',
        barWidth: '8px',
        label: {
          show: false,
          position: 'top',
          distance: '5',
          fontSize: 10,
          fontFamily: 'DIN',
          color: '#36BBF6'
        },
        itemStyle: {
          
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(0, 130, 246, 1)'
          },{
            offset: 1,
            color: 'rgba(0, 130, 246, 0.5)'
          }])
        },
        data: datas[0],
        yAxisIndex: 0
      },
      {
        name: '贷款余额',
        type: 'bar',
        barWidth: '8px',
        label: {
          show: false,
          position: 'top',
          distance: '5',
          fontSize: 10,
          fontFamily: 'DIN',
          color: '#36BBF6'
        },
        itemStyle: {
          
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(0, 231, 211, 1)'
          },{
            offset: 1,
            color: 'rgba(0, 231, 211, 0.5)'
          }])
        },
        data: datas[1],
        yAxisIndex: 0
      },
      {
        name:'存款增速',
        type: 'line',
        symbol: "circle",
        symbolSize: 8,
        label: {
          show: false,
          position: 'top',
          distance: '5',
          fontSize: 10,
          fontFamily: 'DIN',
          color: '#fff'
        },
        itemStyle: {
          color: '#FFD478',
        },
        lineStyle: {
          width: '2',
          color: '#FFD478',

        },
        data: datas[2],
        yAxisIndex: 1
      },
      {
        name:'贷款增速',
        type: 'line',
        symbol: "circle",
        symbolSize: 8,
        label: {
          show: false,
          position: 'top',
          distance: '5',
          fontSize: 10,
          fontFamily: 'DIN',
          color: '#fff'
        },
        itemStyle: {
          color: '#FF9900',
        },
        lineStyle: {
          width: '2',
          color: '#FF9900',

        },
        data: datas[3],
        yAxisIndex: 1
      }
    ]
  })
}

</script>

<style lang="scss" scoped>

</style>